Modul ini berpindah dari jalur statis ke alat yang dinamis dan berbasis peristiwa dengan memanipulasi CanvasRenderingContext2D keadaan. Kami fokus pada perluasan kemampuan aplikasi melalui pola tingkat tinggi dan penyaringan matematis.
1. Pola Alat Tingkat Tinggi
Alat seperti tools.Line mengabstraksi peristiwa mouse menggunakan bantuan seperti trackDrag. Sebaliknya, tools.Spray menerapkan pengulangan berbasis interval melalui setInterval, memungkinkan penempatan piksel terus-menerus selama mouse ditekan.
2. Kendala Matematis
Offset acak sederhana menciptakan distribusi persegi. Untuk mencapai efek kuas lingkaran yang alami, kita menggunakan teorema Pythagoras untuk menyaring titik-titik: $x^2 + y^2 < r^2$. Alternatifnya, seseorang dapat menggunakan koordinat polar dengan Math.sin dan Math.cos untuk konversi.
3. Operasi Komposit & Keadaan
Di luar goresan standar, properti globalCompositeOperation menentukan bagaimana piksel baru berinteraksi dengan piksel yang sudah ada. Sebagai contoh, mengatur nilai menjadi 'destination-out' memungkinkan tools.Erase fungsi untuk membuat piksel transparan bukan hanya mengecatnya putih. Kontrol antarmuka seperti controls.color dan controls.brushSize memberikan pembaruan waktu nyata ke fillStyle dan lineWidth secara berturut-turut.
lineCap properti (misalnya, 'round' atau 'square') mengendalikan bentuk ujung garis yang digambar, sangat penting untuk gambar yang halus.